<!-- 首页 -->
<template>
  <div class="dashboard-editor-container">
    <el-row class="">
      <el-col :span="4" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
          <div class="card-panel-icon-wrapper icon-people">
            <img :src="dashboard1" alt="">
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">接入设备</div>
            <count-to :start-val="0" :end-val="quantity.deviceNumber" :duration="2600" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :span="4" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
          <div class="card-panel-icon-wrapper icon-people">
            <img :src="dashboard2" alt="">
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">火警点位</div>
            <count-to :start-val="0" :end-val="quantity.pointNumber.firePointNumber" :duration="2600" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :span="4" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('messages')">
          <div class="card-panel-icon-wrapper icon-message">
            <img :src="dashboard3" alt="">
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">故障点位</div>
            <count-to :start-val="0" :end-val="quantity.pointNumber.faultPointNumber" :duration="3000" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :span="4" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
          <div class="card-panel-icon-wrapper icon-people">
            <img :src="dashboard4" alt="">
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">屏蔽点位</div>
            <count-to :start-val="0" :end-val="quantity.pointNumber.shieldPointNumber" :duration="2600" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :span="4" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('messages')">
          <div class="card-panel-icon-wrapper icon-message">
            <img :src="dashboard5" alt="">
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">安保员</div>
            <count-to :start-val="0" :end-val="quantity.safetyOfficer" :duration="3000" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :span="4" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
          <div class="card-panel-icon-wrapper icon-people">
            <img :src="dashboard6" alt="">
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">任务</div>
            <count-to :start-val="0" :end-val="quantity.taskNumber" :duration="2600" class="card-panel-num" />
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="radius-5">
      <el-col :span="9">
        <div class="chart-title">上海励尔信息科技有限公司 欢迎您！</div>
        <el-row class="panel-group">
          <el-col :span="24" class="progress-box">
            <div id="tjChart" class="chart" style="width:350px;height: 300px;"/>
            <div class="chart-hink">超过了同行业 <span>{{ score.sort }}</span> 的安全分</div>
            <ul class="msg-text">
              <li><span title="火灾报警系统">火灾报警系统</span><i :class="score.FAS===1 ? 'el-icon-circle-close' : score.FAS===2 ? 'el-icon-warning-outline' : 'el-icon-circle-check'"/></li>
              <li><span title="消防给水及消火栓系统">消防给水及消火栓系统</span><i :class="score.FwsAndFh===1 ? 'el-icon-circle-close' : score.FwsAndFh===2 ? 'el-icon-warning-outline' : 'el-icon-circle-check'"/></li>
              <li><span title="自动喷水灭火系统">自动喷水灭火系统</span><i :class="score.Sprinkler===1 ? 'el-icon-circle-close' : score.Sprinkler===2 ? 'el-icon-warning-outline' : 'el-icon-circle-check'"/></li>
              <li><span title="电气火灾监控系统">电气火灾监控系统</span><i :class="score.EemS===1 ? 'el-icon-circle-close' : score.EemS===2 ? 'el-icon-warning-outline' : 'el-icon-circle-check'"/></li>
              <li><span title="机械防排烟系统">机械防排烟系统</span><i :class="score.MscS===1 ? 'el-icon-circle-close' : score.MscS===2 ? 'el-icon-warning-outline' : 'el-icon-circle-check'"/></li>
              <li><span title="单位自管系统">单位自管系统</span><i :class="score.selfDirect===1 ? 'el-icon-circle-close' : score.selfDirect===2 ? 'el-icon-warning-outline' : 'el-icon-circle-check'"/></li>
            </ul>
            <el-progress :percentage="score.score" :show-text="false" :width="180" :stroke-width="8" type="circle" />
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="7">
        <div class="chart-title">巡更时长</div>
        <el-row class="panel-group">
          <el-col :span="24">
            <div id="orderChart" class="chart" style="height: 300px; padding:10px 0 0 10px"/>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="8">
        <div class="chart-title">巡检月统计</div>
        <el-row v-loading="patrolLoading" class="panel-group">
          <el-col :span="24">
            <div class="selectDate">
              <el-date-picker v-model="selectDate" type="month" value-format="yyyy-MM" format="yyyy-MM" placeholder="选择日期" @change="patrolDateChange"/>
            </div>
            <ul class="legend-list">
              <li v-for="(item, index) in inspectionList" :key="index">
                <i :style="{background: item.color}" />
                <span class="name">{{ item.name }}</span>
                <span class="value">{{ item.value }}</span>
              </li>
            </ul>
            <div id="orderChart1" class="chart" style="width: 70%;height: 300px; padding:10px 0 0 10px"/>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="panel-group bottom">
      <el-col :span="8" class="border-right">
        <!-- 火警误报率 -->
        <div class="title">设备联网率</div>
        <div id="falseAlarmRate" class="chart"/>
        <ul class="legend-list">
          <li v-for="(item, index) in falseAlarmRateList" :key="index">
            <i :style="{background: item.color}" />
            <span :title="item.name" class="name">{{ item.name }}</span>
            <span class="value">{{ item.value }}</span>
          </li>
        </ul>
      </el-col>
      <el-col :span="8" class="border-right">
        <!-- 异常上报率 -->
        <div class="title">近七日火警原因</div>
        <div id="abnormalReportingRate" class="chart"/>
        <ul class="legend-list">
          <li v-for="(item, index) in abnormalReportingRateList" :key="index">
            <i :style="{'background': item.color}" />
            <span :title="item.name" class="name">{{ item.name }}</span>
            <span class="value">{{ item.value }}</span>
          </li>
        </ul>
      </el-col>
      <el-col v-loading="patrolLoading" :span="8">
        <!-- <div class="selectDate">
          <el-date-picker v-model="selectDate1" type="date" format="yyyy-MM" placeholder="选择日期" @change="patrolDateChange1"/>
        </div> -->
        <ul class="selectTabs">
          <li :class="selectType === 1 ? 'active' : ''" @click="patrolDateTypeChange(1)">最近一周</li>
          <li :class="selectType === 2 ? 'active' : ''" @click="patrolDateTypeChange(2)">最近一月</li>
        </ul>
        <ul class="legend">
          <li><span/><span>火警</span></li>
          <li><span/><span>故障</span></li>
        </ul>
        <div id="yearMsgInfo" class="chart"/>
      </el-col>
    </el-row>
    <!-- <div class="radius-5">
      <el-row class="panel-group">
        <el-col :span="24">
          <el-tabs v-model="activeName" class="tab-info" @tab-click="handleClick">
            <el-tab-pane label="火灾报警系统" name="first">
              <fireAlarmSystem ref="echartsAa" class="group-echart" />
            </el-tab-pane>
            <el-tab-pane label="消防水系统" name="second">
              消防水系统
            </el-tab-pane>
            <el-tab-pane label="电气火灾监控系统" name="third">
              电气火灾监控系统
            </el-tab-pane>
            <el-tab-pane label="机械防排烟系统" name="forth">
              机械防排烟系统
            </el-tab-pane>
            <el-tab-pane label="其他系统" name="fifth">
              其他系统
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </div> -->
  </div>
</template>

<script>
// import fireAlarmSystem from './component/fireAlarmSystem'
import { inspection, patrol, score, quantity, iot, point, fire } from '@/api/dashboard'
import dashboard1 from '@/assets/dashboard/dashboard1.png'
import dashboard2 from '@/assets/dashboard/dashboard2.png'
import dashboard3 from '@/assets/dashboard/dashboard3.png'
import dashboard4 from '@/assets/dashboard/dashboard4.png'
import dashboard5 from '@/assets/dashboard/dashboard5.png'
import dashboard6 from '@/assets/dashboard/dashboard6.png'

import CountTo from 'vue-count-to'
import echarts from 'echarts'
import 'echarts-liquidfill'
export default {
  components: {
    CountTo
    // ,fireAlarmSystem
  },
  data() {
    return {
      dashboard1,
      dashboard2,
      dashboard3,
      dashboard4,
      dashboard5,
      dashboard6,
      loading1: true,
      activeName: 'first',
      selectDate: '',
      selectDate1: '',
      selectType: 1,
      inspectionList: [
        { value: '30%', name: '已完成', color: '#5C9FFF' },
        { value: '50%', name: '待完成', color: '#3CBC9B' },
        { value: '20%', name: '已逾期', color: '#F04844' }
      ],
      patrolLoading: false,
      score: {},
      patrolXData: [],
      patrolYData: [],
      quantity: {
        pointNumber: {}
      },
      orderChart: null,
      orderChart1: null,
      falseAlarmRate: null,
      abnormalReportingRate: null,
      yearMsgInfo: null,
      tjChart: null,
      'falseAlarmRateList': [],
      'abnormalReportingRateList': []
    }
  },
  created() {
    this.$nextTick(function() {
      this.orderChart = echarts.init(document.getElementById('orderChart'))
      this.orderChart1 = echarts.init(document.getElementById('orderChart1'))
      this.falseAlarmRate = echarts.init(document.getElementById('falseAlarmRate'))
      this.abnormalReportingRate = echarts.init(document.getElementById('abnormalReportingRate'))
      this.yearMsgInfo = echarts.init(document.getElementById('yearMsgInfo'))
      this.tjChart = echarts.init(document.getElementById('tjChart'))
      this.init()
    })
  },
  methods: {
    init() {
      // 评分
      score()
        .then(response => {
          if (response.data.code === 40000) {
            this.score = response.data.data
            var scoreNum = this.score.score > 0 ? parseFloat(this.score.score / 100).toFixed(2) : 0
            console.log(scoreNum)
            this.tjChart.setOption({
              series: [{
                name: '',
                type: 'liquidFill',
                data: [{
                  value: scoreNum,
                  direction: 'left',
                  itemStyle: {
                    color: '#0095F2',
                    opacity: '0.8'
                  }
                },
                {
                  value: scoreNum - 0.06,
                  direction: 'left',
                  itemStyle: {
                    color: '#008BE6'
                  }
                }],
                center: ['35%', '46%'],
                outline: {
                  show: false
                },
                label: {
                  normal: {
                    formatter: function(data) {
                      return parseFloat(data.value * 100).toFixed(0) + '\n' + '\n'
                    },
                    textStyle: {
                      color: '#ffffff',
                      insideColor: 'yellow',
                      fontSize: 26
                    }
                  }
                },
                backgroundStyle: {
                  borderWidth: 0,
                  borderColor: 'red',
                  color: '#C6EBFF'
                }
              }]
            })
          }
        })
      // 接入设备数
      quantity()
        .then(response => {
          if (response.data.code === 40000) {
            this.quantity = response.data.data
            this.quantity.deviceNumber = parseInt(this.quantity.deviceNumber)
            this.quantity.safetyOfficer = parseInt(this.quantity.safetyOfficer)
            this.quantity.taskNumber = parseInt(this.quantity.taskNumber)
            this.quantity.pointNumber.firePointNumber = parseInt(this.quantity.pointNumber.firePointNumber)
            this.quantity.pointNumber.faultPointNumber = parseInt(this.quantity.pointNumber.faultPointNumber)
            this.quantity.pointNumber.shieldPointNumber = parseInt(this.quantity.pointNumber.shieldPointNumber)
          }
        })
      // 巡检完成统计
      this.inspectionFn(this.selectDate)
      // 巡更时长
      patrol()
        .then(response => {
          if (response.data.code === 40000) {
            this.patrolXData = response.data.data.keys
            this.patrolYData = response.data.data.values
            // 每日订单走势
            this.orderChart.setOption({
              xAxis: {
                'type': 'category',
                'boundaryGap': false,
                'axisLine': {
                  'show': false
                },
                'axisTick': {
                  show: false
                },
                'axisLabel': {
                  show: true,
                  textStyle: {
                    color: '#C4C4C2'
                  }
                },
                'data': this.patrolXData
              },
              dataZoom: [{
                type: 'inside'
              }],
              yAxis: {
                'name': '单位：/h',
                'type': 'value',
                'nameTextStyle': {
                  color: '#C4C4C2'
                },
                'axisLine': {
                  'show': false
                },
                'axisTick': {
                  'show': false
                },
                'axisLabel': {
                  show: true,
                  textStyle: {
                    color: '#C4C4C2'
                  }
                }
              },
              series: [{
                'name': '',
                'data': this.patrolYData,
                'type': 'line',
                'itemStyle': {
                  normal: {
                    color: '#09b0f5'
                  }
                },
                'areaStyle': {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#d9e9fe'
                    }, {
                      offset: 1,
                      color: '#ffffff'
                    }])
                  }
                }
              }]
            })
          }
        })
      // 设备联网率
      iot()
        .then(response => {
          if (response.data.code === 40000) {
            this.falseAlarmRateList = response.data.data
            var colorArr = ['#F67393', '#58C5EA', '#F19D7E', '#9FE7BA', '#FADB5B']
            this.falseAlarmRateList.forEach((item, i) => {
              item.color = colorArr[i]
            })
            this.falseAlarmRate.setOption({
              tooltip: {
                trigger: 'item',
                formatter: '{b}: {c} ({d}%)',
                position: 'right'
              },
              series: [{
                name: '',
                type: 'pie',
                radius: ['50%', '70%'],
                center: ['48%', '36%'],
                avoidLabelOverlap: false,
                label: {
                  show: false
                },
                color: ['#F67393', '#58C5EA', '#F19D7E', '#9FE7BA', '#FADB5B'],
                data: response.data.data
              }]
            })
          }
        })

      fire()
        .then(response => {
          if (response.data.code === 40000) {
            this.abnormalReportingRateList = response.data.data
            var colorArr = ['#F67393', '#58C5EA', '#F19D7E', '#9FE7BA', '#FADB5B']
            this.abnormalReportingRateList.forEach((item, i) => {
              item.color = colorArr[i]
            })
            this.abnormalReportingRate.setOption({
              tooltip: {
                trigger: 'item',
                formatter: '{b}: {c} ({d}%)',
                position: 'right'
              },
              series: [{
                name: '',
                type: 'pie',
                radius: ['50%', '70%'],
                center: ['48%', '36%'],
                avoidLabelOverlap: false,
                label: {
                  show: false
                },
                color: ['#F67393', '#58C5EA', '#F19D7E', '#9FE7BA', '#FADB5B'],
                data: response.data.data
              }]
            })
          }
        })
      this.getPoint(1)
    },
    handleSetLineChartData(type) {
      this.$emit('handleSetLineChartData', type)
    },
    getPoint(data) {
      // 近7/30天火警/故障点位
      point({ time_type: data })
        .then(response => {
          if (response.data.code === 40000) {
            this.yearMsgInfo.setOption({
              color: ['#3398DB'],
              tooltip: {
                trigger: 'item',
                show: true,
                formatter: '{b}<br />{a}: {c}次'
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              dataZoom: [{
                type: 'inside'
              }],
              xAxis: [
                {
                  type: 'category',
                  data: response.data.data.keys,
                  'axisLine': {
                    'show': false
                  },
                  axisTick: {
                    show: false
                  },
                  'axisLabel': {
                    show: true,
                    textStyle: {
                      color: '#C4C4C2'
                    }
                  },
                  splitLine: {
                    show: false
                  }
                }
              ],
              yAxis: [
                {
                  // 'name': '单位：/h',
                  type: 'value',
                  'nameTextStyle': {
                    color: '#C4C4C2'
                  },
                  axisTick: {
                    show: false
                  },
                  axisLine: {
                    show: false
                  },
                  'axisLabel': {
                    show: true,
                    textStyle: {
                      color: '#C4C4C2'
                    }
                  },
                  splitLine: {
                    show: false
                  }
                }
              ],
              series: [{
                name: '火警',
                type: 'bar',
                barWidth: '20',
                itemStyle: {
                  normal: {
                    color: '#09DFC0'
                  },
                  emphasis: {
                    color: 'rgba(38,193,201,1)'
                  }
                },
                data: response.data.data.fire
              }, {
                name: '故障',
                type: 'bar',
                barWidth: '20',
                itemStyle: {
                  normal: {
                    color: '#216EDD'
                  },
                  emphasis: {
                    color: 'rgba(38,193,201,1)'
                  }
                },
                data: response.data.data.fault
              }]
            })
          }
        })
    },
    patrolDateTypeChange(data) {
      if (data) {
        this.selectType = data
        this.getPoint(data)
      } else {
        this.getPoint('')
      }
    },
    inspectionFn(selectDate) {
      // 巡检完成统计
      inspection({
        start_at: selectDate
      })
        .then(response => {
          if (response.data.code === 40000) {
            this.orderChart1.setOption({
              tooltip: {
                trigger: 'item',
                formatter: '{b}: {c} ({d}%)'
              },
              series: [{
                name: '',
                type: 'pie',
                radius: ['55%', '70%'],
                avoidLabelOverlap: false,
                color: ['#5EB1F9', '#5ECCCC', '#EB4B2D'],
                label: {
                  show: false
                },
                data: response.data.data
              }]
            })
            this.inspectionList = response.data.data
            this.inspectionList.forEach(item => {
              if (item.name === '已完成') {
                item.color = '#5C9FFF'
              } else if (item.name === '逾期') {
                item.color = '#F04844'
              } else {
                item.color = '#3CBC9B'
              }
            })
          }
        })
    },
    // 巡检统计日期查询
    patrolDateChange(data) {
      if (data) {
        this.inspectionFn(this.selectDate)
      } else {
        this.inspectionFn('')
      }
    },
    // 巡检统计日期查询
    patrolDateChange1(data) {
      if (data) {
        this.getPoint(this.selectDate1)
      } else {
        this.getPoint('')
      }
    },
    handleClick() {},
    setTimeoutFn(str) {
      const that = this
      this[str] = true
      setTimeout(function() {
        that[str] = false
      }, 1000)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  background-color: #F9F9F8;
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
  .radius-5 .panel-group{
    border-radius: 5px;
  }
}
.chart-title{
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #808182;
  font-weight: 600;
}
.panel-group {
  background-color:#FFFFFF;
  position: relative;
  margin-bottom:10px;
  .progress-box{
    position: relative;
    .el-progress{
      position: absolute;
      top: 49px;
      left: 32px;
      width: 170px;
      height: 170px;
    }
  }
  .chart-hink{
    position: absolute;
    left: 10px;
    bottom: 40px;
    span{
      color: #00A4F8;
    }
  }
  .selectDate{
    position: absolute;
    right: 10px;
    top: 5px;
    width: 150px;
    z-index: 100;
    .el-input{
      width:100%;
    }
  }
  .msg-text{
    width: 170px;
    position: absolute;
    right: 10px;
    bottom: 40px;
    padding: 0;
    li{
      width: 180px;
      float: left;
      margin-top: 20px;
      list-style: none;
      height: 24px;
      line-height: 24px;
      span{
        width: 140px;
        height: 24px;
        line-height: 24px;
        display: block;
        text-align: right;
        font-size: 14px;
        font-weight: 600;
        float: left;
        color: #737473;
        margin-right: 15px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
      i{
        float: left;
        display: block;
        margin-top: 4px;
      }
      .el-icon-circle-check{
        color: #78D56D;
      }
      .el-icon-warning-outline{
        color: #F9C95D;
      }
      .el-icon-circle-close{
        color: #EB4C2C;
      }
    }
  }
}
.card-panel-col:last-child .card-panel{
  width: 100%;
  margin: 0;
}
.card-panel {
  width: 94%;
  height: 80px;
  cursor: pointer;
  font-size: 12px;
  position: relative;
  overflow: hidden;
  color: #666;
  background: #fff;
  border-radius: 5px;
  margin-right: 6%;
  border-color: rgba(0, 0, 0, 0.05);
  // &:hover {
  //   .card-panel-icon-wrapper {
  //     color: #fff;
  //   }
  //   .icon-people {
  //     background: #40c9c6;
  //   }
  //   .icon-message {
  //     background: #36a3f7;
  //   }
  //   .icon-money {
  //     background: #f4516c;
  //   }
  //   .icon-shoppingCard {
  //     background: #34bfa3;
  //   }
  // }
  .icon-people {
    color: #40c9c6;
  }
  .icon-message {
    color: #36a3f7;
  }
  .icon-money {
    color: #f4516c;
  }
  .icon-shoppingCard {
    color: #34bfa3;
  }
  .card-panel-icon-wrapper {
    width: 60px;
    height: 60px;
    float: right;
    margin: 12px 14px 0 0;
    transition: all 0.38s ease-out;
    border-radius: 50%;
    text-align: center;
    img {
      width: 52px;
      height: 52px;
      display: block;
    }
  }
  .card-panel-description {
    float: left;
    font-weight: bold;
    margin-top: 18px;
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 14px;
    .card-panel-text {
      font-size: 14px;
      color: #808182;
      margin-bottom: 12px;
    }
    .card-panel-num {
      display: block;
      line-height: 18px;
      color: #333333;
      font-size: 22px;
      font-weight: 600;
    }
  }
}
.legend-list{
  padding:0;
  margin:0;
  margin-top: 120px;
  float: right;
  width: 124px;
  overflow:hidden;
  li{
    list-style: none;
    height: 30px;
    line-height: 30px;
    i{
      width: 16px;
      height: 16px;
      display: block;
      float: left;
      border-radius: 4px;
    }
    span{
      height: 16px;
      line-height: 16px;
      display: block;
      float: left;
      font-size: 14px;
    }
    span.name{
        width: 64px;
        margin: 0 5px;
    }
  }
}
.bottom{
  .tooltip{
    width: 34px;
    height: 20px;
    backgroundColor: #5c9fff;
    position: relative;
    .value{
      width:100%;
      text-align:center
    }
  }
  .el-col{
    position: relative;
    .selectDate{
      position: absolute;
      right: 10px;
      top: 5px;
      width: 150px;
      z-index: 100;
      .el-input{
        width:100%;
      }
    }
  }
  .title{
    width: 45%;
    position: absolute;
    bottom: 20px;
    left: 0px;
    text-align: center;
    font-size: 14px;
  }
  .chart{
    width: 45%;
    height: 220px;
    margin-top: 60px;
    float: left;
  }
  #yearMsgInfo{
    width: 100%;
  }
  .legend-list{
    width: 55%;
    padding:0;
    margin:0;
    margin-top: 50px;
    float: left;
    overflow:hidden;
    li{
      list-style: none;
      margin-top: 15px;
      width: 100%;
      position: relative;
      float: left;
      i{
        width: 16px;
        height: 16px;
        display: block;
        position: absolute;
        left: 0px;
        border-radius: 4px;
      }
      span{
        height: 16px;
        line-height: 16px;
        display: block;
        position: absolute;
        font-size: 14px;
      }
      span.value{
        right: 12px;
      }
      span.name{
        width: 100%;
        margin: 0 5px;
        padding: 0 30px 0 15px;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
    }
  }
  .legend{
    position: absolute;
    right: 15px;
    top: 54px;
    overflow: hidden;
    font-size: 14px;
    li{
      height: 24px;
      line-height: 24px;
      padding-right: 4px;
      span{
        display: block;
        float: left;
      }
      span:first-child{
        width: 16px;
        height: 16px;
        margin-top: 4px;
        margin-right: 5px;
        border-radius: 5px;
        background: #20A0FF;

      }
    }
    li:first-child span:first-child{
      background: #09DFC0;
    }
  }
  .selectTabs{
    position: absolute;
    left: 20px;
    top: 5px;
    overflow: hidden;
    font-size: 14px;
    li{
      padding-right: 40px;
      height: 40px;
      line-height: 40px;
      float: left;
      cursor: pointer;
    }
    .active{
      color: #409EFF;
    }
  }
  .border-right{
    border-right: 1px solid #D8D8D8;
  }
}
</style>
